<template>
  <div class="boxs">
    <div class="box" v-for="(v, index) in arr" :key="index" @click="fun(money[index])">
      <div class="box1">
        <img :src="v" alt="" />
      </div>
      <div class="tex1">{{ text1[index] }}</div>
      <div class="tex2">{{ text2[index] }}</div>
      <span class="tex3">{{text3[index]}}</span> <span class="tex4">{{text4[index]}}</span> <br>
      <div class="moneys">
        <span class="money">{{money[index]}}</span> <span class="originalprice">{{originalprice[index]}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      text1: [],
      text2: [],
      text3: [],
      text4: [],
      money: [],
      originalprice: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/selected",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        element.data.data1.forEach((item) => {
          this.arr.push(item.img1);
          this.text1.push(item.h1);
          this.text2.push(item.h2);
          this.text3.push(item.huodong1);
          this.text4.push(item.huodong2);
          this.money.push(item.price);
          this.originalprice.push(item.priceold);
        });
      });
    });
  },
  methods:{
    fun(myid){
      this.$router.push({path:'/detail',
      query:{
        moneys:myid
      }
      })
    }
  }
};
</script>

<style scoped>
.boxs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  width: 48%;
  height: 325px;
  margin-bottom: 15px;
}
.box1 {
  width: 100%;
  height: 200px;
  background-color: aqua;
}
.box1 img {
  width: 100%;
  height: 100%;
}
.tex1 {
  height: 30px;
  line-height: 30px;
}
.tex2 {
  height: 30px;
  font-size: 14px;
  color: dimgray;
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.tex3 {
  color: white;
  background-color: orange;
  margin-left: 5px;
  margin-right: 15px;
}
.tex4 {
 border: 1px solid red;
 color: red;
}
.moneys{
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
}
.money{
    font-weight: 600;
    font-size: 18px;
}
.originalprice{
  text-decoration:line-through;
    font-size: 14px;
}
</style>